<template>
	<view class="fill-bg-content" :style="[{backgroundImage:'url(https://txr001.zthj.net/static/img/fillBg.png)'}]">
		<cu-custom :isBack="true" :isWhiteBack="true" style="background-color: transparent;">
			<block slot="backText"></block>
			<block slot="content">
				<view class="custom-white-title">{{detailInfo.title}}</view>
			</block>
		</cu-custom>
		<view class="title-content">
			<view class="u-line-2" style="width: 240rpx;">{{detailInfo.title}}</view>
			<!-- <view>数据填报</view> -->
		</view>
		<view class="question-content-p">
			<view class="question-content">
				<view class="text-40 text-bold-600">
					<text class="text-2e79ff">{{currentIndex+1}}</text><text class="text-9999">/{{question_num}}</text>
				</view>
				<view class="margin-top-16">
					<liu-progressbar :progress="progress" bgColor="#24458E" dsColor="#D9D9D9" color="#000000"
						:height="'10rpx'" />
				</view>
				<view class="preview-body">
					<view class="list" v-for="(item,index) in list" :key="index" v-if="currentIndex==index">
						<view class="question-title margin-top-48">
							<!-- <text class="mast-text"
								v-if="item.must_status == 1">*</text> -->
							{{item.value}}
							<!-- <text class="show-status" v-if="item.show_status == 1">(公开)</text> -->
							<!-- <text class="show-status" v-if="item.show_status == -1">(不公开)</text> -->
						</view>
						<view class="content" v-if="item.type == 'username'">
							<!--叹号item.ext_sel_type 防止未设置该字段的时候 不能选择-->
							<view class="flex align-center"
								v-if="(item.ext && item.ext.length > 0 && (!item.ext_sel_type || item.ext_sel_type == 1))">
								<view class="sel-username">{{showUsername[index]}}</view>
								<view class="sel-button" @tap="showSelectFunc('show',index)">选择人员</view>
							</view>
							<input class="input-text" style="height: 80rpx;border: 2rpx solid #D0D0D0;margin-top: 12rpx;font-size: 28rpx;font-weight: 400;padding-left: 24rpx;" v-else placeholder-class="p-class" v-model="resultData[index]" type="text"
								:placeholder="'请输入'+item.value" />
						</view>

						<view class="content" :class="item.type=='phone'?'flex align-center':''"
							v-if="item.type == 'number' || item.type == 'phone'">
							<input class="input-text" placeholder-class="p-class" v-model="resultData[index]"
								type="number" :placeholder="'请输入'+item.value" />
							<button v-if="item.type == 'phone'" class='sel-button type-button' type='primary'
								open-type="getPhoneNumber" withCredentials="true" lang="zh_CN"
								@getphonenumber="getInputMobile" :data-index="index">
								自动填入
							</button>
							<!-- <view class="sel-button" v-if="item.type == 'phone'"  @tap.stop="getInputMobile(index)">自动填入</view> -->
						</view>

						<view class="content" v-if="item.type == 'digit'">
							<input class="input-text" placeholder-class="p-class" v-model="resultData[index]"
								type="digit" :placeholder="'请输入'+item.value" />
						</view>

						<view class="content" v-if="item.type == 'id_card'">
							<input class="input-text" placeholder-class="p-class" v-model="resultData[index]"
								type="idcard" :placeholder="'请输入'+item.value" />
						</view>
						<view class="content margin-top-80" v-if="item.type == 'radio'">

							<view class="margin-top-80">
								<view v-for="(radioItem,radioIndex) in item.ext" :key="radioIndex"
									class="question-answer" :class="selAnswer==radioIndex?'sel':'unsel'"
									@click="radioClick(index,radioIndex)">
									{{radioItem}}
								</view>
							</view>

							<!-- <view class="radio-0" v-for="(radioItem,radioIndex) in item.ext" :key="radioIndex"
								@tap.stop="radioClick(index,radioIndex)">
								<view class="icon-left">
									<text class="iconfont icon-danxuan1-xuanzhong "
										v-if="(resultData[index]) == radioIndex.toString()"></text>
									<text class="iconfont icon-danxuan1" v-else></text>
								</view>
								<view class="right-content">{{radioItem}}</view>
							</view> -->
						</view>
						<view class="content" v-if="item.type == 'text' || item.type == 'email' || item.type == 'chinese' ||
					item.type == 'english' || item.type == 'en_number'">
							<input class="input-text" placeholder-class="p-class" v-model="resultData[index]"
								type="text" :placeholder="'请输入'+item.value" />
						</view>

						<view class="content" v-if="item.type == 'textarea'">
							<view class="text-area">
								<textarea class="show-textarea" :show-confirm-bar="true" placeholder-class="p-class"
									:placeholder="'请输入'+item.value" maxlength="-1" v-model="resultData[index]" />
							</view>
						</view>

						<view class="content" v-if="item.type == 'qianming'">
							<view class="qianming" @tap="qianmingClick('show',index)">
								<view v-if="resultData[index].value == ''" class="qianming-text">点此签名</view>
								<view v-else>
									<image class="qm-image" :src="resultData[index].value">
										<text class="iconfont icon-shanchu-mian closeempty"
											@tap.stop="qianmingClick('del',index)"></text>
								</view>
							</view>

						</view>


						<view class="content" v-if="item.type == 'checkbox'">
							<view class="radio-0 checkbox-0" v-for="(checkItem,checkIndex) in item.ext"
								:key="checkIndex" @tap.stop="checkBoxClick(index,checkIndex)">
								<view class="icon-left">
									<text class="iconfont icon-xuanzhong"
										v-if="(resultData[index]) && (resultData[index].indexOf(checkIndex)) > -1"></text>
									<text class="iconfont icon-weixuanzhong" v-else></text>
								</view>
								<view class="right-content">{{checkItem}}</view>
							</view>
						</view>

						<view class="content" v-if="item.type == 'date'">
							<view class="sel-time">
								<view @tap="DatePicker('date',index)" v-if="resultData[index] == ''">选择日期</view>
								<view @tap="DatePicker('date',index)" v-else>{{resultData[index]}}</view>
								<text class="iconfont icon-youjiantou"></text>
							</view>
						</view>

						<view class="content" v-if="item.type == 'time'">
							<view class="sel-time">
								<view @tap="DatePicker('time',index)" v-if="resultData[index] == ''">选择时间</view>
								<view @tap="DatePicker('time',index)" v-else>{{resultData[index]}}</view>
								<text class="iconfont icon-youjiantou"></text>
							</view>
						</view>

						<view class="content" v-if="item.type == 'datetime'">
							<view class="sel-time">
								<view @tap="DatePicker('datetime',index)" v-if="resultData[index] == ''">选择时间日期</view>
								<view @tap="DatePicker('datetime',index)" v-else>{{resultData[index]}}</view>
								<text class="iconfont icon-youjiantou"></text>
							</view>
						</view>

						<view class="content" v-if="item.type == 'city'">
							<view class="sel-time">
								<view>
									<picker mode="region" @change="selAreaChange" :data-index="index">
										<view>{{resultData[index].value?resultData[index].value:'请选择'}} </view>
									</picker>
								</view>
								<text class="iconfont icon-youjiantou"></text>
							</view>
						</view>

						<view class="content" v-if="item.type == 'address'">
							<view class="sel-address">
								<view class="show-address">
									{{resultData[index].address?resultData[index].address:''}}
								</view>
								<view class="change-address" @tap="chooseMyLocation(index)"
									:class="!resultData[index].address || resultData[index].address==''?'':'margin-r'">
									<view v-if="!resultData[index].address || resultData[index].address == ''">选择位置
									</view>
									<view v-else>重新选择</view>
								</view>
							</view>
						</view>

						<view class="content" v-if="item.type == 'position'">
							<view class="sel-address">
								<view class="show-address">
									{{resultData[index].address?resultData[index].address:''}}
								</view>
								<view class="change-address" @tap="getCurrentLocation(index)"
									:class="!resultData[index].address || resultData[index].address==''?'':'margin-r'">
									<view v-if="!resultData[index].address || resultData[index].address == ''">点击定位
									</view>
									<view v-else>重新定位</view>
								</view>
							</view>
						</view>


						<view class="content" v-if="item.type == 'image'">
							<wzf-image-upload :dataType="0" :max="item.ext.type == 1?1:9" mediaType="image"
								:chooseNum="item.ext.type == 1?1:9" @chooseSuccess="chooseSuccess"
								@imgDelete="chooseDelete" v-model="resultData[index].value"
								:index="index"></wzf-image-upload>
						</view>


						<view class="content" v-if="item.type == 'video'">
							<wzf-image-upload :dataType="0" :max="1" mediaType="video" name="file" :chooseNum="1"
								:index="index" @chooseSuccess="chooseSuccess" @imgDelete="chooseDelete"
								v-model="resultData[index].value"></wzf-image-upload>
						</view>

						<view class="content" v-if="item.type == 'file'">
							<view class="docx">
								<view class="doc_title" v-if="resultData[index].value.name">
									{{resultData[index].value.name}}
								</view>
								<!-- #ifdef MP-WEIXIN -->
								<view class="sel-docx" @tap="selDocxFromWx(index)">从微信会话中选择</view>
								<!-- #endif -->
							</view>
						</view>


					</view>
				</view>
				<!-- <view class="margin-top-48 question-title">
					贵公司本月用电量是多少？
				</view>
				<view class="margin-top-80">
					<view v-for="(item,index) in answer" :key="index" class="question-answer"
						:class="selAnswer==index?'sel':'unsel'" @click="selAnswer=index">
						{{item.title}}
					</view>
				</view> -->
			</view>
			<view class="margin-top-120">
				<button class="cu-btn next-btn" @click="next">下一题</button>
			</view>
		</view>

		<view class="cu-modal" :class="modalName=='Image'?'show':''">
			<view class="cu-dialog">
				<view class="bg-img"
					:style="[{backgroundImage:'url(https://txr001.zthj.net/static/img/fillComplete.png)'}]">
					<view class="complate-title">答题完成</view>
					<button class="look-report cu-btn" @click="goPage('/pages/questionnaire/questionnaire')">返回</button>
				</view>
			</view>
		</view>


		<mx-date-picker :show="mxDatePicker.showPicker" :type="mxDatePicker.type" :value="mxDatePicker.value"
			:show-tips="true" :show-seconds="true" @confirm="DatePickerEnd" @cancel="DatePickerEnd" />
	</view>
</template>

<script>
	import wzfImageUpload from '@/components/wzf-image-upload/wzf-image-upload.vue';
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	import znxdSxqm from "@/components/znxd-sxqm/znxd-sxqm.vue";
	import Upload from "@/utils/fileupload/upload";
	export default {
		components: {
			wzfImageUpload,
			MxDatePicker,
			znxdSxqm
		},
		data() {
			return {
				selAnswer: -1,

				modalName: "",
				join_time: '',
				s_id: 0,
				list: [],
				detailInfo: {},
				resultData: [],
				currentIndex: 0,
				question_num: 0,
				progress: 0,
				//日期时间选择数据
				mxDatePicker: {
					showPicker: false,
					type: '',
					value: '',
					index: -1,
				},
				showSelect:{
					canSelList:[],
					status:false,
					listIndex:-1,
					selIndex:-1
				},
				showUsername:[],
			}
		},
		
		onLoad(params) {
			
			if (params.join_time) {
				this.join_time = params.join_time;
			}
			if (params.s_id) {
				this.s_id = params.s_id;
				this.getInfo();
			}

			
			// console.log(this.list);
		},
		methods: {
			async submit() {
				var that = this;
				if (!that.vuex_token) {
					this.goPage('/pages/login/login');
					return false;
				}

				//this.$refs.preview.uploadFile(); //检测上传文件
				if (that.detailInfo.join_datalist != '') {
					var resData = this.resultData; //获取最终数据方法
					// console.log('join resData',resData);
					if (!resData || resData.length < 1) {
						return false;
					}
				} else {
					var resData = '';
				}
				// 数组转换为字符串的一种方法是在其后连接一个空字符串
				// var need_check_text = resData + "";
				// if (need_check_text) {
				// 	var res = await that.$api.checkQiniuText(need_check_text);
				// 	console.log("校验结果" + JSON.stringify(res))
				// 	if (!res.status) {
				// 		return;
				// 	}
				// }

				that.loadingMsg('正在提交数据');
				let res = await that.$api.joinStatistics({
					resData,
					s_id: that.s_id,
					join_time: that.join_time
				});
				that.msg(res.msg)
				if (res.code == 1) {
					that.modalName = 'Image';
					// that.showSubmit = false;
					// setTimeout(function() {
					// 	that.$api.navbackTo();
					// }, 2000)
				}


				//var check = this.$refs.preview.checkFormData();  //检测填写数据是否完善
				//console.log(resData)
			},
			next() {
				// console.log(this.currentIndex)
				if (typeof(this.resultData[this.currentIndex]) == 'undefined') {
					uni.showToast({
						title: '请填写问卷内容！',
						icon: 'none'
					})
					return false;
				}
				if (this.currentIndex == this.question_num - 1) {
					this.submit();
					// this.modalName = 'Image';
					return false;
				}

				this.selAnswer = -1;
				this.currentIndex += 1;
				this.progress = (this.currentIndex + 1) / this.question_num * 100;

			},
			
			getInfo: async function() {
				var that = this;
				if (that.s_id > 0) {
					let res = await that.$api.getStatisticsDetailInfo({
						s_id: that.s_id,
						join_time: that.join_time
					});
					// console.log(res);

					if (res.code == 1) {
						var detailInfo = res.data.info;
						that.detailInfo = detailInfo;
						if (detailInfo.join_datalist) {
							that.list = JSON.parse(detailInfo.join_datalist)
							that.question_num = that.list.length;
							that.progress = (1 / that.question_num) * 100;
							// console.log(that.progress);
						}
						// if (detailInfo.last_content) {
						// 	setTimeout(function() {
						// 		var contentArr = JSON.parse(detailInfo.last_content);
						// 		that.$refs.preview.saveInitResultData(contentArr)
						// 	}, 100)
						// }

						// that.showSubmit = true;
						if (that.resultData.length < 1) {
							that.initResultData();
						}
					} else {
						that.msg(res.msg);
					}

				}
			},

			DatePicker(type, index) { //显示
				console.log(111);
				this.mxDatePicker.index = index;
				this.mxDatePicker.type = type;
				this.mxDatePicker.showPicker = true;
				this.mxDatePicker.value = this.resultData[index];
				//this.mxDatePicker.value  = '';
				this.$forceUpdate();
			},
			DatePickerEnd(e) { //选择
				this.mxDatePicker.showPicker = false;
				if (e) {
					this.resultData[this.mxDatePicker.index] = e.value;
					this.$forceUpdate();
				}
			},

			//单选点击事件
			radioClick(index, c_index) {
				this.selAnswer = c_index;
				this.resultData[index] = c_index;
				// console.log(this.resultData[index])
				this.$forceUpdate(); //强制更新某个值
			},
			initResultData() {
				var _this = this;
				var dataList = _this.list;
				if (dataList.length > 0) {
					dataList.forEach(function(item, index) {
						if (item.type == 'qianming' || item.type == 'image' || item.type == 'video' || item.type ==
							'file') {
							var value = (item.type == 'image' || item.type == 'video') ? [] : '';
							if (item.type == 'file') {
								value = {
									name: '',
									path: '',
									qnPath: ''
								};
								_this.resultData[index] = {
									type: item.type,
									value: value,
								};
							} else {
								_this.resultData[index] = {
									type: item.type,
									value: value,
									qnValue: value
								};
							}

						} else if (item.type == 'checkbox') {
							_this.resultData[index] = [];
						} else if (item.type == 'city') {
							_this.resultData[index] = {
								code: '',
								value: ''
							};
						} else if (item.type == 'username') {
							//追加默认显示
							if (_this.default_user_index > -1) {
								if (item.ext && item.ext.length > 0) {
									var name = item.ext[_this.default_user_index] ? item.ext[_this
										.default_user_index] : '';
									if (!item.ext_sel_type || item.ext_sel_type == 1) {
										_this.resultData[index] = _this.default_user_index;
										_this.showUsername[index] = name;
									} else {
										//如果是2的话  代表需要用户手动填写  因此直接展示用户姓名
										_this.resultData[index] = name;
									}

								} else {
									_this.resultData[index] = '';
								}
							} else {
								_this.resultData[index] = '';
							}
						} else {
							_this.resultData[index] = '';
						}
					})
					_this.$forceUpdate(); //强制更新某个值
				}
			},

			//编辑的时候，从已保存数据修改值
			saveInitResultData(saveData) {
				var _this = this;
				var dataList = _this.list;
				//初始化异常参数
				var errorImage = this.$api.getSystemConfig('errorImage');
				var errorImageBse = this.$api.getSystemConfig('errorImageBse');
				for (var key in errorImage) {
					var md5Name = _this.$api.getMd5Name(errorImage[key], false);
					_this.uploadFileListLog[md5Name] = errorImageBse[key];
				}
				//初始化显示列表
				if (dataList.length > 0) {
					dataList.forEach(function(item, index) {
						var saveInfo = saveData[index];
						if (item.type == 'username') {
							if (_this.default_user_index > -1) {
								//如果是从打卡页面选中进来的 那么不应该设置默认值  默认应该是用户选中的这个
								if (item.ext && item.ext.length > 0) {
									var name = item.ext[_this.default_user_index] ? item.ext[_this
										.default_user_index] : '';
									if (!item.ext_sel_type || item.ext_sel_type == 1) {
										_this.resultData[index] = _this.default_user_index;
										_this.showUsername[index] = name;
									} else {
										//如果是2的话  代表需要用户手动填写  因此直接展示用户姓名
										_this.resultData[index] = name;
									}
								} else {
									_this.resultData[index] = '';
								}
							} else {
								if (saveInfo.type == 'sel') {
									if (item.extUser && item.extUser[saveInfo.sel_key]) {
										item.extUser[saveInfo.sel_key] =
											''; //当为edit的时候 代表是他本人选择的 把他本人的清空 防止这个人填写不上
									}
									var name = item.ext[saveInfo.sel_key] ? item.ext[saveInfo.sel_key] : '';
									if (!item.ext_sel_type || item.ext_sel_type == 1) {
										_this.resultData[index] = saveInfo.sel_key;
										_this.showUsername[index] = name;
									} else {
										//如果是2的话  代表需要用户手动填写  因此直接展示用户姓名
										_this.resultData[index] = name;
									}
								} else if (saveInfo.type == 'input') {
									_this.resultData[index] = saveInfo.content;
								}
							}
						} else if (item.type == 'qianming' || item.type == 'image' || item.type == 'video' || item
							.type == 'file') {
							var value = ''; //要显示的资源地址 后续包含cdnurl
							if (item.type == 'qianming') {
								var value = saveInfo.qnValue ? saveInfo.qnValue : '';
								if (value) {
									var md5Name = _this.$api.getMd5Name(value, false);
									_this.uploadFileListLog[md5Name] = saveInfo.value;
								}
							} else if (item.type == 'image' || item.type == 'video') {
								var value = saveInfo.qnValue ? saveInfo.qnValue : [];
								if (value.length > 0) {
									for (var i = 0; i < value.length; i++) {
										var md5Name = _this.$api.getMd5Name(value[i], false);
										_this.uploadFileListLog[md5Name] = saveInfo.value[i];
									}
								}
							} else if (item.type == 'file') {
								var value = {
									name: saveInfo.name ? saveInfo.name : '',
									path: saveInfo.qnPath ? saveInfo.qnPath : '',
									qnPath: ''
								};
								if (saveInfo.qnPath) {
									var md5Name = _this.$api.getMd5Name(saveInfo.qnPath, false);
									_this.uploadFileListLog[md5Name] = saveInfo.path;
								}

							}
							if (item.type == 'file') {

								_this.resultData[index] = {
									type: item.type,
									value: value,
								};
							} else {
								_this.resultData[index] = {
									type: item.type,
									value: value,
									qnValue: value
								};
							}

						} else if (item.type == 'checkbox') {
							if (saveInfo && saveInfo.length > 0) {
								_this.resultData[index] = saveInfo;
							} else {
								_this.resultData[index] = [];
							}
						} else if (item.type == 'city') {
							if (saveInfo.code) {
								_this.resultData[index] = {
									code: saveInfo.code,
									value: saveInfo.value
								};
							} else {
								_this.resultData[index] = {
									code: '',
									value: ''
								};
							}

						} else {
							_this.resultData[index] = saveInfo
						}
					})
					//console.log('修改后resultData',_this.resultData)
					//console.log('_this.uploadFileListLog',_this.uploadFileListLog)
				}
				_this.$forceUpdate(); //强制更新某个值
			},
			
			//选择项
			showSelectFunc(type,index)
			{
				var data = this.list;
				if(type == 'show')
				{
					this.showSelect.listIndex = index;
					this.showSelect.status = true;
					var ext = data[index].ext;
					var extUser = data[index].extUser?data[index].extUser:{};
					var resultDataIndexValue = (this.resultData[index].toString() == '')?-1:this.resultData[index];
					if(resultDataIndexValue >= 0)
					{
						this.showSelect.selIndex = resultDataIndexValue;
					}else{
						this.showSelect.selIndex = -1;
					}
					var extList = [];
					for(var i=0;i<ext.length;i++)
					{
						var status = (extUser[i])?-1:1;
						extList.push({
							name:ext[i],
							status:status
						})
					}
					this.showSelect.canSelList = extList;
				}else if(type == 'sel')
				{
					var nowIndex = this.showSelect.selIndex;
					this.showSelect.selIndex = (nowIndex == index)?-1:index;
				}else if(type == 'cancel')
				{
					this.showSelect.status = false;
				}else if(type == 'confirm')
				{
					if(this.showSelect.selIndex == -1)
					{
						var username = '';
					}else{
						let info = this.showSelect.canSelList[this.showSelect.selIndex];
						var username = info.name;
					}
					this.showUsername[this.showSelect.listIndex] = username;
					this.showSelect.status = false;
					this.resultData[this.showSelect.listIndex] = this.showSelect.selIndex;
					// this.resultDataFunc();
				}
			},
		
		getCurrentLocation(index){
			var that = this;
			that.loadingMsg('正在定位');
			that.getLocation(function(e){
				console.log("定位结果"+JSON.stringify(e))
				//uni.hideLoading();
				if(e.address)
				{
					that.resultData[index] = {
						address:(e.address?e.address:''),
						lat:e.lat,
						lng:e.lng,
						map_type:'tianditu'
					};
					that.$forceUpdate()
				}
			},function(err){
				console.log("定位结果"+JSON.stringify(err))
			});
		},
		
		chooseMyLocation(index){
			var that = this;
			that.chooseLocation(function(e){
				if(e.address)
				{
					that.resultData[index] = {
						address:(e.address?e.address:'')+(e.name?e.name:''),
						lat:e.latitude,
						lng:e.longitude,
						map_type:'tencent'
					};
					that.$forceUpdate()
				}
			});
		},
		
		//选择图片视频之类的
		chooseSuccess(tempFilePaths, type,index) {
			var thisDatas = []
			tempFilePaths.forEach(item => {
				thisDatas.push(item)
			})
			// console.log('thisDatas', thisDatas)
			
			this.resultData[index].value.push(...thisDatas)
			this.$forceUpdate();
			//this.imageDataType.push(...thisDatas)
		},
		//删除回调
		chooseDelete(e){
			console.log(e,'chooseDelete');  //a
			this.resultData[e.index].value = e.tempFilePaths;
			this.$forceUpdate();
		},
		selAreaChange(e){
			try{
				var index = e.currentTarget.dataset.index;
			}catch{
				var index = -1;
			}
			if(index == -1)
			{
				this.msg('选择失败');
				return;
			}
			var detail = e.detail;
			this.resultData[index].code = detail.code.join(',');
			this.resultData[index].value = detail.value.join(',');
			this.$forceUpdate();
		},
		
		}
	}
</script>

<style scoped lang="scss">
	.preview-body {
		background-color: #ffffff;
		width: 94%;
		margin: 3%;
		border-radius: 20rpx;

		.p-class {
			font-size: 24rpx;
		}

		.list {
			// border-bottom: 2rpx solid #eee;
			padding: 0rpx 20rpx;

			.content {
				height: auto;
				word-break: break-all;
				padding-bottom: 10rpx;

				.sel-username {
					width: 600rpx;
				}

				.sel-button {
					background-color: $uni-btn-color;
					width: 150rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					color: #ffffff;
					border-radius: 15rpx;
					font-size: 24rpx;
				}

				.type-button {
					width: 160rpx;
				}

				.text-area {
					.show-textarea {
						width: 100%;
						border: 2rpx solid #eee;
						border-radius: 10rpx;
						padding: 20rpx 10rpx;
					}
				}

				.qianming {
					width: 100%;
					height: 300rpx;
					background: #F4F4F4;
					border-radius: 10rpx;
					position: relative;

					.qianming-text {
						position: absolute;
						width: 100%;
						text-align: center;
						top: 140rpx;
						letter-spacing: 6rpx;
						font-size: 28rpx;
					}

					.qm-image {
						width: 100%;
						height: 300rpx;
					}

					.closeempty {
						position: absolute;
						font-size: 44rpx;
						top: 4px;
						right: 10rpx;
					}
				}

				.sel-address {
					font-size: 26rpx;
					color: #807777;
					display: flex;
					align-items: center;

					.show-address {
						max-width: 80%;
					}

					.change-address {
						background-color: $uni-btn-color;
						width: 150rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						color: #ffffff;
						border-radius: 15rpx;
						font-size: 24rpx;
					}

					.margin-r {
						margin-left: 10rpx;
					}
				}

				.sel-time {
					height: 80rpx;
					line-height: 80rpx;
					font-size: 26rpx;
					color: #807777;
					position: relative;

					.iconfont {
						position: absolute;
						right: 0;
						top: 0;
					}
				}

				.docx {
					.doc_title {
						color: #3D5B7D;
						margin-bottom: 15rpx;
					}

					.sel-docx {
						background-color: $uni-btn-color;
						width: 300rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						color: #ffffff;
						border-radius: 15rpx;
						font-size: 26rpx;
					}
				}

				.radio-0 {
					display: flex;
					align-items: center;
					min-height: 60rpx;

					.iconfont {
						font-size: 42rpx;
						color: $uni-color-primary;
					}

					.icon-left {
						margin-right: 10rpx;
					}

					.right-content {}
				}

				.checkbox-0 {
					.iconfont {
						font-size: 30rpx;
						color: $uni-btn-color;
					}
				}

				.input-text {
					height: 60rpx;
					min-width: 510rpx;
				}

			}

			.title {
				height: 80rpx;
				line-height: 80rpx;
				overflow: hidden;
				font-size: 28rpx;
			}
		}
	}






	.fill-bg-content {
		background-size: 100% 100%;
		width: 100%;
		height: 1764rpx;

		.title-content {
			padding: 200rpx 32rpx 0;
			font-size: 52rpx;
			font-weight: 600;
			color: #FFFFFF;
			height: 340rpx;
		}

		.question-content-p {
			padding: 172rpx 32rpx 0;

			.question-content {
				background: #FFFFFF;
				border-radius: 52rpx;
				padding: 48rpx 32rpx 74rpx;
			}

			.question-title {
				font-size: 32rpx;
				font-weight: 500;
				color: #000000;
			}

			.question-answer {
				height: 64rpx;
				line-height: 64rpx;
				border-radius: 40rpx;
				margin-bottom: 32rpx;
				font-size: 28rpx;
				font-weight: 500;
				padding-left: 40rpx;
			}

			.sel {
				background-color: #4690F7;
				color: #FFFFFF;
			}

			.unsel {
				background: #EBEEF0;
				color: #000000;
			}

			.next-btn {
				height: 100rpx;
				line-height: 100rpx;
				background: #24458E;
				box-shadow: 0px 6rpx 16rpx 0px rgba(0, 0, 0, 0.2);
				border-radius: 48rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
				width: 100%;
			}
		}
	}

	.bg-img {
		background-size: 100% 100%;
		width: 100%;
		height: 796rpx;
		border-radius: 48rpx;

		.complate-title {
			text-align: center;
			font-size: 40rpx;
			font-weight: 500;
			color: #000000;
			padding-top: 470rpx;
		}

		.look-report {
			margin-top: 74rpx;
			width: 400rpx;
			height: 100rpx;
			background: #24458E;
			box-shadow: 0px 6rpx 16rpx 0px rgba(0, 0, 0, 0.2);
			border-radius: 48rpx;
			line-height: 100rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>